<script setup lang="typescript"></script>

<template>
  <div>
    <el-row style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px;">
      <el-row class="group">
        <el-progress type="circle" :percentage="60" color="#5cb87a"/>
        <div class="header">
          订单完成率
        </div>
      </el-row>
      <el-row class="group">
        <el-progress type="circle" :percentage="90" color="#1890ff"/>
        <div class="header">
          产品满意度
        </div>
      </el-row>
    </el-row>
    <el-row style="display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 30px;">
      <el-row class="group">
        <el-progress type="circle" :percentage="92" color="#9cc"/>
        <div class="header">
          淘x动销率
        </div>
      </el-row>
      <el-row class="group">
        <el-progress type="circle" :percentage="5" color="#f33"/>
        <div class="header">
          售后故障率        
        </div>
      </el-row>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.group {
  text-align: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}
.header {
  color: var(--el-text-color-primary);
  font-size: 14px;
  margin-top: 10px;
  font-weight: 500;
}
</style>